<template>
  <div class="box">
      <div class="title">任务列表</div>
      <div class="list">
          <div :class="{ unfinished: item.status==false }" class="task" v-for="(item,index) in tasklist" :key="index">
              <div>
                  <span><input @click="emit('cs',item)" type="checkbox" :checked="item.status"></span>
                  <span>{{item.id}}</span>
                  <span>{{item.name}}</span>
              </div>
              <span @click="emit('dt',item)">删除</span>
          </div>
          
          <div v-show="tasklist.length == 0" class="empty">任务列表为空,请添加一个任务!</div>
      </div>
  </div>
</template>

<script setup>
    import { defineProps,defineEmits } from 'vue'
    //接收属性
    defineProps({
        tasklist:{ type: Array }
    })
    //声明emit
    var emit = defineEmits(['cs','dt'])

</script>

<style scoped lang='scss'>
.box{
    .title{
        font-weight: bold;
        line-height: 40px;
    }
    .list{
        .task{
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: 10px;
            margin: 10px 0;
            background-color: lightseagreen;
            line-height: 40px;
            span{
                display: inline-block;
                margin-right: 10px;
            }
        }
        .task.unfinished{
            background-color: red;
        }
    }
} 
.empty{
    text-align: center;
    padding: 50px 0;
}
</style>